<template>
  <div class="page-container">
    <!-- 管理员账号 -->
    <div class="project-table">
      <div class="table-header">
        <div class="table-title">管理员账号管理</div>
        <div class="table-actions">
          <div class="create-button" @click="buildUser">
            <span class="create-icon">+</span> 创建账号
          </div>
        </div>
      </div>
      <!-- 展示和编辑表格 -->
      <el-scrollbar style="margin-bottom: 20px" height="520px">
        <el-table
          :data="filterTableData.filter((item) => item.level === 1)"
          :header-cell-style="{
            'text-align': 'center',
            height: '50px',
            color: '#999999',
            'font-size': '15px',
          }"
          :cell-style="{ 'text-align': 'center', height: '80px' }"
          style="width: 100%"
          ref="multipleTableRef"
          @selection-change="handleSelectionChange"
        >
          <el-table-column label="账号类型" prop="levelText" />
          <el-table-column label="用户名" prop="users" />
          <el-table-column label="密码" prop="password" />
          <el-table-column label="站点查看" prop="model">
            <template v-slot="scope">
              <el-dropdown>
                <span
                  class="el-dropdown-link hover-effect"
                  style="
                    background: linear-gradient(
                      135deg,
                      rgba(64, 158, 255, 0.82) 0%,
                      rgba(64, 158, 255, 0.48) 100%
                    );
                    backdrop-filter: blur(4px);
                    border-radius: 6px;
                    padding: 8px 16px;
                  "
                >
                  <span
                    style="
                      font-size: 13px;
                      white-space: normal;
                      word-break: break-word;
                      display: inline-block;
                      max-width: 160px;
                      color: #303133;
                    "
                  >
                    {{ scope.row.model[0] }}
                  </span>
                  <span
                    class="view-more-tip"
                    style="
                      font-size: 11px;
                      opacity: 0.7;
                      margin-left: 6px;
                      color: #303133;
                    "
                  >
                    (查看更多)
                  </span>
                  <el-icon
                    class="el-icon--right"
                    style="color: rgba(64, 158, 255, 0.8)"
                  >
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu
                    class="card-menu"
                    style="
                      width: auto;
                      max-width: 100vw;
                      padding: 0;
                      border-radius: var(--el-border-radius-base);
                    "
                  >
                    <div
                      class="card-container"
                      style="
                        display: grid;
                        grid-template-columns: repeat(6, minmax(150px, 1fr));
                        max-width: 1200px;
                        gap: 16px;
                        padding: 16px;
                        background: linear-gradient(
                          145deg,
                          var(--el-color-primary-light-9) 0%,
                          var(--el-bg-color) 90%
                        );
                      "
                    >
                      <div
                        v-for="(item, index) in scope.row.model"
                        :key="index"
                        class="model-box"
                        style="
                          margin: 0;
                          border-radius: 8px;
                          cursor: pointer;
                          transition: all 0.3s;
                          display: flex;
                          justify-content: center;
                          align-items: center;
                          padding: 6px;
                          background: linear-gradient(
                            145deg,
                            var(--el-color-primary-light-8) 0%,
                            var(--el-color-primary-light-9) 100%
                          );
                          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
                          backdrop-filter: blur(2px);
                          text-align: center;
                        "
                      >
                        <div
                          class="content-wrapper"
                          style="
                            display: flex;
                            justify-content: center;
                            align-items: center;
                          "
                        >
                          <span
                            class="model-title"
                            style="
                              font-size: 12px;
                              color: var(--el-text-color-primary);
                              word-break: break-word;
                            "
                            >{{ item }}</span
                          >
                          <el-icon
                            class="info-icon"
                            style="
                              color: var(--el-color-info);
                              font-size: 12px;
                              margin-left: 8px;
                            "
                            ><info-filled
                          /></el-icon>
                        </div>
                      </div>
                    </div>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="state">
            <template v-slot="scope">
              <el-switch
                v-model="scope.row.isStatus"
                :active-value="1"
                :inactive-value="0"
                style="--el-switch-on-color: #13ce66"
              />
            </template>
          </el-table-column>
          <el-table-column align="right">
            <!-- <template #header>
		        <el-input v-model="search" size="small" placeholder="Type to search" />
		      </template> -->
            <template #header>
              <div>操作</div>
            </template>
            <template #default="scope">
              <button
                class="editAdmin"
                @click="handleEdit(scope.$index, scope.row)"
              >
                编辑
              </button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>

      <!-- 编辑对话框 -->
      <el-dialog
        v-model="state.showModel"
        :title="state.uid == '' ? '创建账号' : '编辑账号'"
        :width="state.level != 1 ? '1400px' : '600px' "
        align-center
        style="
          font-weight: 600;
          background: #f5f7fa;
          --el-dialog-close-size: 30px;
          transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.8s; transform: scale(0.98);
          will-change: width, height, transform;
          contain: layout;
          transform: translateZ(1);
        "
      >
        <el-scrollbar min-height="271px">
          <div style="display: flex; margin-top: 20px; margin-bottom: 20px">
            <div class="userType">账号类型</div>
            <div class="userType_a">
              <el-radio-group
                v-model="state.siteVest"
                max="1"
                fill="#409eff"
                @change="changeSel"
              >
                <el-radio label="管理员账号" name="siteVest" border />
                <el-radio label="客户账号" name="siteVest" border />
              </el-radio-group>
            </div>
          </div>
          <div style="display: flex; margin-top: 15px; margin-bottom: 18px">
            <div
              style="
                margin: 10px 18px 10px 20px;
                font-weight: 600;
                color: #303133;
                font-size: 15px;
              "
            >
              账号状态
            </div>
            <el-radio-group
              fill="#409eff"
              v-model="state.radioState"
              @change="changeStaus"
              size="small"
            >
              <el-radio-button label="启用" />
              <el-radio-button label="停用" />
            </el-radio-group>
          </div>

          <div class="bankNum">
            <div class="bankNum_a">账号</div>
            <el-input
              v-model="state.username"
              maxlength="15"
              size="small"
              style="flex: 5; max-width: 300px; margin-right: auto"
              class="enterpriseName"
            />
          </div>
          <div class="passW">
            <div class="passW_a">密码</div>
            <el-input
              v-model="state.password"
              maxlength="15"
              size="small"
              style="flex: 5; max-width: 300px; margin-right: auto"
              class="enterpriseName"
            />
          </div>

          <!-- 选择查看站点 -->
          <div
            style="display: flex; margin-top: 20px; margin-bottom: 20px;"
            v-if="state.level != 1"
          >
            <div class="line_f">
              <div class="section-header">
                <span class="title-decoration"></span>
                <h3 class="line_b">管理站点列表</h3>
              </div>
              <el-checkbox-group
                v-model="state.siteVestList"
                fill="#409eff"
                class="custom-checkbox-group"
                style="
                  display: flex;
                  flex-wrap: wrap;
                  gap: 16px;
                  padding: 12px;
                  & > .el-checkbox {
                    flex: 0 1 calc(16.666% - 14px);
                    min-width: 180px;
                  }
                "
                @change="getworkLineItem"
              >
                <el-checkbox
                  v-for="(item, index) in state.workLineList"
                  :key="index"
                  :label="item"
                  name="siteVestList"
                  :class="[
                    'custom-checkbox',
                    { 'checked-state': state.siteVestList.includes(item) },
                  ]"
                  style="
                    background: linear-gradient(
                      135deg,
                      rgba(64, 158, 255, 0.14) 0%,
                      rgba(64, 158, 255, 0.03) 100%
                    );
                    border-radius: 2px;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
                    backdrop-filter: blur(3px);
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    width: max-content;
                    min-width: 100px;
                    padding: 12px 16px;
                  "
                >
                  <template #default>
                    <span class="checkbox-label">{{ item }}</span>
                  </template>
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <div class="dialog-footer">
            <el-button
              class="custom-btn"
              style="
                padding: 12px 24px;
                border: none;
                background: linear-gradient(
                  135deg,
                  rgba(64, 158, 255, 0.43) 0%,
                  rgba(64, 158, 255, 0.2) 100%
                );
              "
              @click="closeModel"
            >
              取消
            </el-button>
            <el-button
              type="primary"
              class="custom-btn"
              style="
                padding: 12px 24px;
                border: none;
                background: linear-gradient(
                  135deg,
                  rgba(24, 144, 255, 0.8) 0%,
                  rgba(64, 158, 255, 0.5) 100%
                );
                color: rgba(0, 0, 0, 0.75);
              "
              @click="submitFrom"
            >
              {{ state.uid == "" ? "创建" : "更新" }}
            </el-button>
          </div>
        </el-scrollbar>
      </el-dialog>
    </div>


    <!-- 加载动画 -->
    <div v-if="loading" class="loading-overlay">
          <div class="loading-spinner"></div>
          <div class="loading-text">加载中，请稍候...</div>
    </div>

    <!-- 客户账号 -->
    <div class="project-table">
      <div class="table-header">
        <div class="table-title">客户账号管理</div>
        <div class="table-actions">
          <div class="create-button" @click="buildUser">
            <span class="create-icon">+</span> 创建账号
          </div>
        </div>
      </div>
      <!-- 展示和编辑表格 -->
      <el-scrollbar style="margin-bottom: 20px" height="520px">
        <el-table
          :data="filterTableData.filter((item) => item.level != 1)"
          :header-cell-style="{
            'text-align': 'center',
            height: '50px',
            color: '#999999',
            'font-size': '15px',
          }"
          :cell-style="{ 'text-align': 'center', height: '80px' }"
          style="width: 100%"
          ref="multipleTableRef"
          @selection-change="handleSelectionChange"
        >
          <el-table-column label="账号类型" prop="levelText" />
          <el-table-column label="用户名" prop="users" />
          <el-table-column label="密码" prop="password" />
          <el-table-column label="站点查看" prop="model">
            <template v-slot="scope">
              <el-dropdown>
                <span
                  class="el-dropdown-link hover-effect"
                  style="
                    background: linear-gradient(
                      135deg,
                      rgba(64, 158, 255, 0.82) 0%,
                      rgba(64, 158, 255, 0.48) 100%
                    );
                    backdrop-filter: blur(4px);
                    border-radius: 6px;
                    padding: 8px 16px;
                  "
                >
                  <span
                    style="
                      font-size: 13px;
                      white-space: normal;
                      word-break: break-word;
                      display: inline-block;
                      max-width: 160px;
                      color: #303133;
                    "
                  >
                    {{ scope.row.model[0] }}
                  </span>
                  <span
                    class="view-more-tip"
                    style="
                      font-size: 11px;
                      opacity: 0.7;
                      margin-left: 6px;
                      color: #303133;
                    "
                  >
                    (查看更多)
                  </span>
                  <el-icon
                    class="el-icon--right"
                    style="color: rgba(64, 158, 255, 0.8)"
                  >
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu
                    class="card-menu"
                    style="
                      width: auto;
                      max-width: 100vw;
                      padding: 0;
                      border-radius: var(--el-border-radius-base);
                    "
                  >
                    <div
                      class="card-container"
                      style="
                        display: grid;
                        grid-template-columns: repeat(6, minmax(150px, 1fr));
                        max-width: 1200px;
                        gap: 16px;
                        padding: 16px;
                        background: linear-gradient(
                          145deg,
                          var(--el-color-primary-light-9) 0%,
                          var(--el-bg-color) 90%
                        );
                      "
                    >
                      <div
                        v-for="(item, index) in scope.row.model"
                        :key="index"
                        class="model-box"
                        style="
                          margin: 0;
                          border-radius: 8px;
                          cursor: pointer;
                          transition: all 0.3s;
                          display: flex;
                          justify-content: center;
                          align-items: center;
                          padding: 6px;
                          background: linear-gradient(
                            145deg,
                            var(--el-color-primary-light-8) 0%,
                            var(--el-color-primary-light-9) 100%
                          );
                          box-shadow: var(--el-box-shadow-light);
                          backdrop-filter: blur(2px);
                          text-align: center;
                        "
                      >
                        <div
                          class="content-wrapper"
                          style="
                            display: flex;
                            justify-content: center;
                            align-items: center;
                          "
                        >
                          <span
                            class="model-title"
                            style="
                              font-size: 12px;
                              color: var(--el-text-color-primary);
                              word-break: break-word;
                            "
                            >{{ item }}</span
                          >
                          <el-icon
                            class="info-icon"
                            style="
                              color: var(--el-color-info);
                              font-size: 12px;
                              margin-left: 8px;
                            "
                            ><info-filled
                          /></el-icon>
                        </div>
                      </div>
                    </div>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="state">
            <template v-slot="scope">
              <el-switch
                v-model="scope.row.isStatus"
                :active-value="1"
                :inactive-value="0"
                style="--el-switch-on-color: #13ce66"
              />
            </template>
          </el-table-column>
          <el-table-column align="right">
            <!-- <template #header>
		        <el-input v-model="search" size="small" placeholder="Type to search" />
		      </template> -->
            <template #header>
              <div>操作</div>
            </template>
            <template #default="scope">
              <button
                class="editAdmin"
                @click="handleEdit(scope.$index, scope.row)"
              >
                编辑
              </button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
      
    </div>
  </div>
</template>

<script setup>
import { toRefs, reactive, onMounted, computed, ref } from "vue";
import { ArrowDown, Plus } from "@element-plus/icons-vue";
import http from "../libs/http";

const state = reactive({
  value: "",
  valueTwo: "",
  modelVal: "选择模板",
  tableData: [],
  showModel: false, //显示编辑弹窗
  inputVal: "",
  dialogImageUrl: "",
  dialogVisible: false,
  radioState: "启用",
  worktype: [],
  vestVal: [],
  siteVest: [],

  username: "",
  password: "",
  name: "",
  level: "",
  status: 1,
  uid: "",

  workLineList: "",
  workIdList: [],
  siteVestList: [],
  siteLineStr: "",
});

const loading = ref(false);

// 数据初始化
onMounted(() => {
  getSiteList();
});

// 显示图表内容逻辑
const filterTableData = ref([]);

// 编辑
const handleEdit = (index, row) => {
  state.showModel = true;
  // console.log(index, JSON.parse(JSON.stringify(row)));
  let newRow = JSON.parse(JSON.stringify(row));
  // 编辑时复现原有数据表格数据
  state.uid = newRow.uid;
  let levelSel =
    newRow.level == 1 ? "管理员账号" : newRow.level == 2 ? "客户账号" : 0;
  state.username = newRow.users;
  state.password = newRow.password;
  state.siteVest = levelSel;
  state.level = levelSel == "管理员账号" ? 1 : levelSel == "客户账号" ? 2 : 0;
  state.radioState = newRow.state;
  state.siteVestList = newRow.model;
  state.siteLineStr = newRow.workitem;
};

// 多选和单选的逻辑
const multipleTableRef = ref();
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

// 获取用户账号管理列表
const getUserList = async (pageId) => {
  let param = {
    token: localStorage.getItem("openid"),
  };
  loading.value = true;
  const res = await http.$post("/hd_project/Backend/getAdminList", param);
  if (res.code == 200) {
    let userList = res.data;
    let newUserList = [];
    // 表格添加一个选中项

    // console.log(">>>>>>>>>>>拿到用户账号列表了", userList);
    userList.map((item) => {
      let workLineList_b = JSON.parse(JSON.stringify(state.workLineList));
      let workIdList_b = JSON.parse(JSON.stringify(state.workIdList));
      // console.log(workLineList_b, '>>>>>>>>>>>>站点分级拿到工作流', item)

      let newLine = [];
      let getAllIdx = [];

      workIdList_b.map((m, n) => {
        item.activity_id_list_str.split(",").map((h, g) => {
          if (m == h) {
            getAllIdx.push(n);
          }
        });
      });
      // console.log('>>>>>>>>>>当前选择项的下标', getAllIdx)
      workLineList_b.map((f, y) => {
        getAllIdx.map((i, k) => {
          if (y == i) {
            newLine.push(f);
          }
        });
      });
      loading.value = false;
      // console.log(newLine, '>>>>>>>>>>>>>>>>????');

      newUserList.push({
        uid: item.admin_id,
        users: item.username,
        password: item.password,
        model: newLine, //选择查看的站点
        level: item.level,
        levelText:
          item.level == 1 ? "管理员账号" : item.level == 2 ? "客户账号" : "",
        state: item.status == 1 ? "启用" : "停用",
        isStatus: item.status,
        workitem: item.activity_id_list_str,
      });
    });
    // console.log(newUserList, ">>>>>>>>>>这是新组装的数组");
    state.tableData = newUserList;

    filterTableData.value = newUserList;
  } else {
    console.log(">>>账号列表获取失败!");
    loading.value = false;
  }
};

// 获取站点列表信息
const getSiteList = async () => {
  try {
    let param = {
      token: localStorage.getItem("openid"),
    };
    const res = await http.$post(
      "/hd_project/Backend/getActivityList",
      param
    );
    if (res.code == 200 && res.data) {
      const widList = res.data.map((i) => i.id);
      const newworkList = res.data.map((i) => i.activity_name);

      state.workLineList = newworkList;
      state.workIdList = widList;
      await getUserList(1);
    } else {
      ElMessage.error("站点列表获取失败");
    }
  } catch (error) {
    console.error("获取站点列表异常:", error);
    ElMessage.error("获取站点列表异常");
  }
};

// 获取选择站点项
const getworkLineItem = (e) => {
  // console.log("拿到选择的所有工作流了", e);
  let newWorkLine = [];
  state.workLineList.map((i, k) => {
    e.map((j, y) => {
      if (i == j) {
        newWorkLine.push(state.workIdList[k]);
      }
    });
  });
  console.log(
    newWorkLine.join(","),
    ">>>>>>>>>>>>>>>>>>>>拿到所有工作流下标了"
  );
  state.siteLineStr = newWorkLine.join(",");
};

// 创建账号按钮
const buildUser = () => {
  console.log(">>>>>>>>>>开始创建账号了");
  state.showModel = true;
  state.uid = "";
  clearDate();
};

// 点击表单的取消按钮
const closeModel = () => {
  state.showModel = false;
};

//获取表单的所有参数
//获取账号类型 1 管理员 2 运营人员
const changeSel = (e) => {
  state.level = e == "管理员账号" ? 1 : e == "客户账号" ? 2 : 0;
  console.log(e, ">>>>>>>>>");
};
//获取账号状态
const changeStaus = (e) => {
  state.status = e == "启用" ? 1 : e == "停用" ? 0 : 1;
};

// 正则校验和非空判断
const isInputKong = () => {
  if (state.username == "" || state.password == "" || state.level == "") {
    return false;
  } else {
    return true;
  }
};
// 每次进入都要清空一下数据
const clearDate = () => {
  state.username = "";
  state.password = "";
  state.level = "";
  state.siteVest = [];
  state.status = 1;
  state.siteVestList = [];
  state.siteLineStr = "";
};

//点击表单确认按钮
const submitFrom = async () => {
  if (isInputKong()) {
    //根据用户选择的等级，拼接站点管理字符串
    let newsiteLineStr;
    if (state.level == 1) {
      newsiteLineStr = "";
    } else if (state.level == 2) {
      if (state.siteLineStr == "" || state.siteLineStr == null) {
        return ElMessage("站点选择项不能为空！");
      }
      newsiteLineStr = state.siteLineStr;
    }

    let uid = state.uid == "" ? 0 : state.uid;
    let param = {
      token: localStorage.getItem("openid"),
      username: state.username,
      password: state.password,
      level: state.level,
      status: state.status,
      activity_id_list_str: newsiteLineStr, //站点管理,拼接id字符串
      admin_id: uid,
    };
    const res = await http.$post("/hd_project/Backend/editAdmin", param);
    if (res.code == 200) {
      console.log(">>>>>>>>>>>>>账号创建成功啦啦啦啦啦啦");
      getUserList(1);
      state.showModel = false;
      state.uid == ""
        ? ElMessage({
            message: "创建成功",
            type: "success",
          })
        : ElMessage({
            message: "编辑成功",
            type: "success",
          });
      // 这个要做一下处理，当用户停用是当前正在使用的账号,且表格处于编辑成功的状态，要跳转到登录页面
    } else {
      state.uid == "" ? ElMessage("创建失败！") : ElMessage("编辑失败！");
      state.showModel = false;
    }
  } else {
    ElMessage("填空项不能为空！");
  }
};
</script>

<style scoped>
.Title {
  font-size: 18px;
}

.flewbtn {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.elSelect_a {
  border-radius: 15px;
  width: 250px;
  margin-right: 15px;
}

::v-deep .elSelect_a .el-input__wrapper {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  box-sizing: border-box;
  box-shadow: none;
}

.elSelect {
  border-radius: 15px;
  width: 250px;
  /* height: 28px; */
  flex: 8;
}

::v-deep .elSelect .el-input__wrapper {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  box-sizing: border-box;
  box-shadow: none;
}

::v-deep .elSelect .el-input__wrapper:focus {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  box-sizing: border-box;
  box-shadow: none;
  color: #c0c4cc;
}

::v-deep .elSelect .el-input__inner {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  box-shadow: none;
  padding: 0;
}

/* 改变输入框样式 */
::v-deep .enterpriseName .el-input__inner {
  /* width:100%; */
  /* background-color: #e8e8e8; */
  border-color: #c0c4cc;
  color: #000;
  padding: 10px;
  box-sizing: border-box;
  /* border-radius: 5px; */
  height: 32px;
  border-radius: 3px;
}

.enterpriseName ::v-deep .el-input__inner {
  border: none;
}

::v-deep .enterpriseName .el-input__wrapper {
  padding: 0;
}

/* 改变上传按钮样式 */
::v-deep.el-upload--picture-card,
::v-deep .el-upload-list__item {
  width: 100px;
  height: 100px;
  line-height: 110px;
  border: none;
  background: #fff;
}

/* 改变选择器样式 */
::v-deep .Selectbox .el-input__wrapper {
  /* width:100%; */
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  color: #000;
  padding: 10px;
  box-sizing: border-box;
  /* border-radius: 5px; */
  height: 28px;
  width: 100% !important;
  flex: 8;
}

::v-deep .Selectbox .el-input__wrapper .el-input__inner {
  border: none;
}

/* 改变文本域样式 */
::v-deep .textTip .el-textarea__inner {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  color: #000;
  padding: 10px;
  box-sizing: border-box;
}

.block-col-2 .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

/* 隐藏横向滚动条 */
.el-scrollbar__bar {
  display: none !important;
}

#el-id-878-3 .el-dialog__body {
  padding: 0 !important;
}

/* 改变上传框框的大小 */
::v-deep .el-upload--picture-card {
  border: 1px dashed #e7e7e9;
}

::v-deep .el-upload--picture-card:hover {
  border-color: #e7e7e9;
  color: #e7e7e9;
}

::v-deep .el-upload--picture-card {
  width: 70px;
  height: 70px;
  font-size: 16px !important;
}

::v-deep .el-upload {
  width: 70px;
  height: 70px;
  line-height: 50px;
  font-size: 16px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 70px;
  height: 70px;
  line-height: 50px;
  font-size: 16px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item-actions:hover {
  opacity: 1;
  font-size: 16px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 70px;
  height: 70px;
  line-height: 50px;
  font-size: 16px;
}

::v-deep .el-upload--picture-card .el-icon-plus {
  width: 28px;
  height: 28px !important;
  line-height: 1.7 !important;
}

::v-deep .avatar {
  width: 70px;
  height: 70px;
}

/* 确认按钮样式 */
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 44px;
}

::v-deep(
    .el-pagination.is-background .el-pager li:not(.is-disabled).is-active
  ) {
  background: linear-gradient(
    135deg,
    #1e5799 0%,
    #207cca 51%,
    #2989d8 100%
  ) !important;
}

.userType {
  font-weight: 600;
  display: flex;
  justify-content: center;
  margin-top: 7px;
  margin-left: 21px;
  margin-right: 17px;
  color: #303133;
  font-size: 15px;
}

.userType_a {
  flex: 8;
  padding-left: 6px;
  border-radius: 3px;
  box-sizing: border-box;
}

.carryName {
  line-height: 20px;
  text-align: center;
  font-weight: 600;
  margin-left: 6px;
  margin-right: 17px;
}

.carryName_a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 18px;
}

.carryName_b {
  /* flex: 2; */
  line-height: 20px;
  text-align: center;
  font-weight: 600;
  margin-left: 33px;
  margin-right: 18px;
}

.bankNum {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 18px;
}

.bankNum_a {
  /* flex: 2; */
  line-height: 20px;
  text-align: center;
  font-weight: 600;
  margin-left: 47px;
  margin-right: 17px;
  color: #303133;
  font-size: 15px;
}

.passW {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 18px;
}

.passW_a {
  /* flex: 2; */
  line-height: 20px;
  text-align: center;
  font-weight: 600;
  margin-left: 47px;
  margin-right: 17px;
  color: #303133;
  font-size: 15px;
}

.passW_b {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 18px;
  margin-bottom: 18px;
}

.section-header {
  display: flex;
  align-items: center;
}

.title-decoration {
  width: 3px;
  height: 16px;
  background: #409eff;
  margin-right: 8px;
  border-radius: 2px;
}

.line_b {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  letter-spacing: 0.5px;
}

.line_f {
  flex: 8;
  background-color: #f5f7fa;
  padding-left: 6px;
  border-radius: 3px;
  box-sizing: border-box;
}

.line_f .el-checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  padding: 20px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.9),
    rgba(245, 247, 250, 0.8)
  );
  border-radius: 12px;
  border: 1px solid rgba(228, 231, 237, 0.6);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.line_f .el-checkbox-group::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(64, 158, 255, 0.06) 0%,
    transparent 60%
  );
  pointer-events: none;
}

.outbox {
  background: #fff;
  padding: 30px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-table {
  min-height: 40vh;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #f8fafc;
  border-bottom: 1px solid #ebeef5;
}

.table-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.create-button {
  background: linear-gradient(135deg, #1e5799 0%, #2989d8 100%);
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

.create-button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(41, 137, 216, 0.3);
}

.create-icon {
  margin-right: 6px;
}

.editAdmin {
  width: 70px;
  height: 30px;
  background: linear-gradient(135deg, #1e5799 0%, #2989d8 100%);
  color: #fff;
  border: none;
  border-radius: 4px;
}

.el-dropdown-link {
  display: inline-block;
  padding: 8px 16px;
  font-size: 10px;
  color: #fff;
  background-color: #409eff;
  /* Element Plus 蓝色主题色 */
  border: none;
  border-radius: 4px;
  /* 圆角 */
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  /* 平滑过渡效果 */
  text-align: center;
  /* 文字居中 */
  white-space: nowrap;
  /* 防止文字换行 */
  outline: none;
  /* 移除默认轮廓 */
}

.el-dropdown-link:hover {
  background-color: #66b1ff;
  /* 悬停时背景色变深 */
  color: #fff;
  /* 悬停时文字颜色 */
}

.el-dropdown-link:active {
  background-color: #2684fb;
  /* 按下时背景色更深 */
}

.page-container {
  position: relative;
  min-height: 100vh;
  padding: 20px;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3a7bb8;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text {
    font-size: 16px;
    color: #3a7bb8;
}
</style>
